import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Badge from '../../ch/components/Badge.vue';

<Meta
  title="Components/Badge"
  component={Badge}
  argTypes={{
    color: { control: { type: 'select', options: ['info', 'error', 'warning', 'success','gray', 'red', 'yellow', 'orange', 'green', 'blue', 'indigo', 'purple', 'pink'] } },
    size: { control: { type: 'select', options: ['base', 'sm'] } },
    icon: { control: { type: 'select', options: ['Cancel', 'Checkmark', undefined] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Badge },
  template: '<Badge :color="color" :size="size" :icon="icon" :label="label" />',
});

# Badge

## Example

Badges are used to attach an extra information to a text, a label or a title. If you need interactive element, use the [tagItem](?path=/docs/components-tagitem--example) instead.

<Canvas>
  <Story
    name="Example"
    args={{
      color: 'blue',
      size: 'base',
      icon: undefined,
      label: 'Badge',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Colors
For color variations, the following css classes are built:
- `badge--info`
- `badge--error`
- `badge--warning`
- `badge--success`

and

- `badge--gray`
- `badge--red`
- `badge--yellow`
- `badge--orange`
- `badge--green`
- `badge--blue`
- `badge--indigo`
- `badge--purple`
- `badge--pink`

<Canvas>
    <button class="badge badge--info">info</button>
    <button class="badge badge--warning">warning</button>
    <button class="badge badge--error">error</button>
    <button class="badge badge--success">success</button>
</Canvas>

<Canvas>
    <button class="badge badge--gray">gray</button>
    <button class="badge badge--red">red</button>
    <button class="badge badge--yellow">yellow</button>
    <button class="badge badge--orange">orange</button>
    <button class="badge badge--green">green</button>
    <button class="badge badge--blue">blue</button>
    <button class="badge badge--indigo">indigo</button>
    <button class="badge badge--purple">purple</button>
    <button class="badge badge--pink">pink</button>
</Canvas>


## Sizes
For size variations, the following css classes are built:
- `badge--base` default value
- `badge--sm` for small badges

<Canvas>
    <button class="badge badge--base badge--gray">badge--base</button>
    <button class="badge badge--sm badge--gray">badge--sm</button>
</Canvas>

## Icons
For icon variations, the following css classes are built:
- `badge--icon` for icon

<Canvas>
  <div class="badge badge--gray badge--icon">
    <span class="badge__text">badge--icon</span>
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      class="badge__icon icon icon--base"
    >
      <path
        xmlns="http://www.w3.org/2000/svg"
        d="m17.153 7.066-4.8 4.801-4.779-4.779-.53.531 4.779 4.778-4.757 4.756.531.531 4.756-4.757 4.778 4.779.531-.53-4.779-4.779 4.801-4.8z"
      ></path>
    </svg>
  </div>
</Canvas>
